<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			
			body {
				padding-left: 17px;
				background-color: #FDFBFE;
				font-size: 12px;
				font-family: tahoma, arial, "Hiragino Sans GB", "WenQuanYi Micro Hei", "微软雅黑", "宋体", sans-serif;
			}
			
			a {
				/*color: black;*/
				text-decoration: none;
			}
			
			.font14 {
				font-size: 14px;
			}
			
			.div0 {
				width: 1000px;
				margin: 0 auto;
			}
			
			.div1 {
				height: 97px;
				margin-top: 40px;
			}
			
			.bg {
				background-image: url(img/sprite-hash-91639fdc.png);
			}
			
			.div1_01 {
				width: 313px;
				height: 53px;
				background-position: 0 0;
				float: left;
			}
			
			.div1_02 {
				width: 445px;
				height: 28px;
				margin-top: 12.5px;
				background-position: -317px 0;
				float: right;
			}
			
			.div2 {
				height: 600px;
				/*border: 1px solid black;*/
				background-image: url(img/bao.jpg);
				/*background-position: center center;
				background-repeat:no-repeat ;*/
			}
			
			.div2_01 {
				width: 300px;
				height: 414px;
				/*padding-top: 40px;
				padding-right: 74px;*/
				margin-top: 40px;
				margin-right: 20px;
				float: right;
				/*border: 1px solid black;*/
			}
			
			.fl {
				float: left;
			}
			
			.fr {
				float: right;
			}
			
			.pr {
				position: relative;
			}
			
			.pa {
				position: absolute;
			}
			
			.zhuce {
				width: 300px;
				height: 16px;
				margin-bottom: 24px;
			}
			
			.zhuce_01 {
				line-height: 19px;
			}
			
			.zhuce_02 {
				color: #F10180;
				line-height: 19px;
			}
			
			.inp {
				width: 300px;
				height: 346px;
				/*border: 1px solid black;*/
			}
			
			.inp_1 {
				width: 300px;
				height: 56px;
			}
			
			.inp_1_01 {
				background-color: white;
				box-shadow: none;
				width: 278px;
				padding: 6px 10px;
				border: 1px solid #b2b2b2;
				border-radius: 3px;
				color: #333;
				outline: none;
			}
			
			.inp_1_02 {
				height: 16px;
				background-color: white;
				box-shadow: none;
				width: 154px;
				padding: 6px 10px;
				margin-right: 10px;
				border: 1px solid #b2b2b2;
				border-radius: 3px;
				color: #333;
				outline: none;
			}
			
			.inp_1_03 {
				width: 112px;
				line-height: 28px;
				background-color: #d0d0d0;
				border-radius: 3px;
				padding: 0 12px;
				color: #999;
				border: 1px solid transparent;
				text-align: center;
				outline: none;
				cursor: not-allowed;
			}
			
			.disp {
				margin-top: 2px;
				margin-bottom: 5px;
				width: 176px;
				height: 19px;
				color: red;
				display: none;
			}
			
			.tongyishu {
				width: 300px;
				height: 42px;
				/*border: 1px solid black;*/
			}
			
			.fuxuan_01 {
				display: inline-block;
				width: 19px;
				height: 16px;
				background-image: url(img/sprite.png);
				background-position-x: -48px;
				/*border: 1px solid black;*/
			}
			
			.fuxuan_02 {
				width: 281;
				color: #1d94d;
			}
			
			.lijizhuce {
				margin-bottom: 30px;
				width: 300px;
				height: 72px;
			}
			
			.ys {
				width: 300px;
				font-size: 16px;
				line-height: 40px;
				text-align: center;
				color: white;
				border: 0;
				background-color: #F10180;
				border-radius: 3px;
				cursor: pointer;
				outline: none;
			}
			
			.yxiang {
				margin-top: 18px;
				color: #1d94d;
			}
			
			.div3 {
				height: 12px;
				text-align: center;
				margin-bottom: 20px;
				color: #767074;
			}
			
			.False {
				background-image: url(img/false.png);
				display: none;
			}
			
			.True {
				background-image: url(img/true.png);
				display: none;
			}
			
			.IMG {
				width: 20px;
				height: 20px;
				left: 270px;
				top: 4px;
				/*border: 1px solid red;*/
			}
			
			.IMG2 {
				width: 20px;
				height: 20px;
				left: 146px;
				top: 4px;
			}
			
			.zb1 {
				background-position: -1px -1.5px;
			}
			
			.zb2 {
				background-position: -2.5px -1.5px;
			}
		</style>
	</head>

	<body>
		<div class="div0 div1">
			<div class="div1_01 bg"></div>
			<div class="div1_02 bg"></div>
		</div>
		<div class="div0 div2">
			<div class="div2_01 fr">
				<div class="zhuce">
					<span class="fl font14">欢迎注册</span>
					<span class="fr zhuce_01">已注册可<a href="#" class="zhuce_02">直接登录</a></span>
				</div>
				<div class="inp">
					<form action="" method="get" id="regFrom">
						<div class="inp_1 pr">
							<input type="text" name="phone" id="phone" value="" class="inp_1_01" placeholder="请输入用户名" />
							<span class="False IMG pa zb1"></span>
							<span class="True IMG pa zb2"></span>
							<p class="disp">请输入正确的手机号码</p>
						</div>

						<div class="inp_1">
							<div class="fl pr">
								<input type="text" name="code" id="code" value="" class="inp_1_02" placeholder="请输入验证码" />
								<span class="False IMG2 pa zb1"></span>
								<span class="True IMG2 pa zb2"></span>
								<p class="disp">请输入6位数字手机验证码</p>
							</div>
							<input type="button" id="getCode" value="获取验证码" class="inp_1_03 fr" disabled="disabled" />
						</div>

						<div class="inp_1 pr">
							<input type="password" name="password" id="password" value="" class="inp_1_01" placeholder="密码由6-20位字母、数字和符号组成" />
							<span class="False IMG pa zb1"></span>
							<span class="True IMG pa zb2"></span>
							<p class="disp">请输入6-20位密码</p>
						</div>

						<div class="inp_1 pr">
							<input type="password" name="retpassword" id="retpassword" value="" class="inp_1_01" placeholder="请再次输入上面的密码" />
							<span class="False IMG pa zb1"></span>
							<span class="True IMG pa zb2"></span>
							<p class="disp">两次输入的密码不一致，请重试</p>
						</div>

						<div class="tongyishu">
							<lable for="jj" class="fuxuan_01 fl" onclick="fun1()" id="fxk"></lable>
							<label class="fuxuan_02 fr">我已阅读并接受<a href="#">《唯品会服务条款》</a>与<a href="#">《隐私条款》</a>
							</label>
						</div>
						<div class="lijizhuce">
							<input type="submit" id="btnReg" value="立即注册" onclick="" class="ys fl">
							<a href="#"><span class="yxiang fr">通过邮箱注册﹥</span></a>
						</div>
					</form>
				</div>
			</div>
		</div>
		<div class="div0 div3">
			<p class="wenben">Copyright 2008-2017 vip.com，All Rights Reserved ICP证：粤 B2-20080329</p>
		</div>

		<script type="text/javascript">
			var n = 1
			/**
			 * 点击阅读条款对勾移位
			 */
			function fun1() {
				n++;
				if(n % 2 == 0) {
					document.getElementById("fxk").style.backgroundPositionX = "-24px";
					return true;
				} else {
					document.getElementById("fxk").style.backgroundPositionX = "-48px";
					return false;
				}
			}

			//提交表单内容校验
			document.getElementById("regFrom").onsubmit = function() {
				n++;
				var phone = document.getElementById("phone");
				if(yzPhone()&&yzCode()&& yzPassword()&&yzRetpassword()&&fun1()) {
					return true;
				}else{
					return false;
				}
				
			}
			/**
			 * 判断手机号对错，解锁验证码
			 */
			function yzPhone() {
				var phone = document.getElementById("phone");
				var phonenum = parseInt(phone.value);
				var reg=/^1[3|4|5|7|8][0-9]{9}$/;//电话号第二位数为3,4,5,7,8,的手机用户
				if(reg.test(phonenum)) {
					phone.parentNode.children[2].style.display = "block"
					phone.parentNode.children[1].style.display = "none"
					phone.parentNode.children[3].style.display = "none"
					document.getElementById("getCode").disabled = false;
					document.getElementById("getCode").style.color = "#e00078";
					document.getElementById("getCode").style.backgroundColor = "#fcedf2";
					document.getElementById("getCode").style.border = "1px solid #ffbee0";
					document.getElementById("getCode").style.cursor = "pointer";
					return true;
				} else {
					//设置错误信息消息的显示
					phone.parentNode.children[1].style.display = "block"
					phone.parentNode.children[3].style.display = "block"
					phone.parentNode.children[2].style.display = "none"
					return false;
				}
			}
			/**
			 * 判断验证码对错
			 */
			function yzCode() {
				var code = document.getElementById("code");
				var codenum = parseInt(code.value);
				var  reg = /^\d{6}$/;
				if(reg.test(codenum)) {
					code.parentNode.children[2].style.display = "block"
					code.parentNode.children[1].style.display = "none"
					code.parentNode.children[3].style.display = "none"
					return true;
				} else {
					//设置错误信息消息的显示
					code.parentNode.children[1].style.display = "block"
					code.parentNode.children[3].style.display = "block"
					code.parentNode.children[2].style.display = "none"
					return false;
				}
			}
			/*
			 * 判断密码对错
			 */
			function yzPassword() {
				var password = document.getElementById("password");
				var reg = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,20}$/;//必须数字字母组合，不能纯数字或纯字母
				if(reg.test(password.value)) {
					password.parentNode.children[2].style.display = "block"
					password.parentNode.children[1].style.display = "none"
					password.parentNode.children[3].style.display = "none"
					return true;
				} else {
					//设置错误信息消息的显示
					password.parentNode.children[1].style.display = "block"
					password.parentNode.children[3].style.display = "block"
					password.parentNode.children[2].style.display = "none"
					return false;
				}
			}
			/**
			 * 判断第二次输入秘密的对错
			 */
			function yzRetpassword() {
				var password = document.getElementById("password");
				var retpassword = document.getElementById("retpassword");
				console.log(password.value);
				console.log(retpassword.value);
				if(retpassword.value == "") {
					//没输入内容时的显示
					retpassword.parentNode.children[2].style.display = "none"
					retpassword.parentNode.children[1].style.display = "none"
					retpassword.parentNode.children[3].style.display = "none"
					return false;
				} else if(retpassword.value === password.value) {
					//全等于第一次密码的显示
					retpassword.parentNode.children[2].style.display = "block"
					retpassword.parentNode.children[1].style.display = "none"
					retpassword.parentNode.children[3].style.display = "none"
					return true;
				} else {
					//设置错误信息消息的显示
					retpassword.parentNode.children[1].style.display = "block"
					retpassword.parentNode.children[3].style.display = "block"
					retpassword.parentNode.children[2].style.display = "none"
					return false;
				}
			}

			document.getElementById("phone").onblur = yzPhone;
			document.getElementById("code").onblur = yzCode;
			document.getElementById("password").onblur = yzPassword;
			document.getElementById("retpassword").onblur = yzRetpassword;
		</script>


	</body>

</html>